<template>
  <ul class="gzhb-process">
    <li
      v-for="item in dataList"
      class="gzhb-process__item"
      :style="[{
        'background-color' : user.no ? item.principal === user.no ? '' : '#f5f5f5' : '' 
      }]"
      @click="handleClick(item)"
    >
      <div class="guochen clearfix">
        <div class="left">
          <p class="time">
            <span class="gzhb-process__point">
              <img :src="item.stat | filterUrl" />
            </span>
            <span class="gzhb-process__title">{{item.name}}</span>
            <span
              v-if="item.onTheWayStatLabel || 
                item.updateOrNew === 'A' || 
                item.updateOrNew === 'U' "
              class="gzhb-process__title_icon"
            >
              <img :src="item.onTheWayStatLabel | filterTip(item)" />
            </span>
          </p>
          <p class="desc">
            <span v-if="item.stat">{{item.stat | filterStatus}}</span>
            <span>{{item.principalName}}</span>
            <span>{{item.finish.substr(0, 10)}}</span>
          </p>
        </div>
        <span class="ui-icon ui-icon__more"></span>
      </div>
    </li>
  </ul>
  <!-- 

stat: "51"
11 ==> weikaishi.png  ==>  未开始
22 ==> zhengchangjinxing.png ==>正常进行
32 ==> anshiwancheng.png ==>按期完成
41 ==> zhongzhi.png ==>已终止
51 ==> yanqi.png ==>逾期
34 ==> yuqiwancheng.png ==>逾期完成
81 ==> yujiyanqi.png ==>即将到期

onTheWayStatLabel 有文字图片
  -->
</template>

<script>


import reportbtn from "@/assets/images/reportbtn.png";

import delay from "@/assets/images/delay.png";
import finish from "@/assets/images/finish.png";
import newpng from "@/assets/images/new.png";
import relay from "@/assets/images/relay.png";
import terminate from "@/assets/images/terminate.png";
import update from "@/assets/images/update.png";

import anshiwancheng from "@/assets/images/yujiyanqi.png";
import weikaishi from "@/assets/images/weikaishi.png";
import yanqi from "@/assets/images/yanqi.png";
import yujiyanqi from "@/assets/images/yujiyanqi.png";
import yuqiwancheng from "@/assets/images/yuqiwancheng.png";
import zhengchangjinxing from "@/assets/images/zhengchangjinxing.png";
import zhongzhi from "@/assets/images/zhongzhi.png";

let statusList = [
  { status: '11', url: weikaishi, title: '未开始' },
  { status: '22', url: zhengchangjinxing, title: '正常进行' },
  { status: '31', url: anshiwancheng, title: '按期完成' },
  { status: '32', url: anshiwancheng, title: '按期完成' },
  { status: '33', url: anshiwancheng, title: '按期完成' },
  { status: '34', url: yuqiwancheng, title: '逾期完成' },
  { status: '41', url: zhongzhi, title: '已终止' },
  { status: '51', url: yanqi, title: '逾期' },
  { status: '81', url: yujiyanqi, title: '即将到期' },
]

export default {
  name: 'GzhbItem',
  props: {
    dataList: '',
    user: {
      type: Object,
      default () {
        return {
          no: ''
        }
      }
    }
  },
  filters: {
    filterUrl (status) {
      let url = ''
      statusList.forEach(item => {
        if (item.status === status) {
          url = item.url
        }
      })
      return url
    },
    filterStatus (status) {
      let title = ''
      statusList.forEach(item => {
        if (item.status === status) {
          title = item.title
        }
      })
      return title
    },
    filterTip (path, item) {
      if (item.onTheWayStatLabel) {
        switch (path) {
          case 'delay':
            return delay
            break;
          case 'finish':
            return finish
            break;
          case 'relay':
            return relay
            break;
          case 'terminate':
            return terminate
            break;
        }
        return 'img/' + path + '.png'
      } else if (item.updateOrNew === 'A') {
        return newpng
      } else if (item.updateOrNew === 'U') {
        return update
      }
    }
  },
  methods: {
    handleClick (item) {
      this.$emit('jump2Detail', item)
    }
  }
}
</script>

<style lang="less" scoped>
.gzhb-process {
  height: 100%;
  overflow-y: scroll;
  .gzhb-process__item {
    position: relative;
    padding: 0.15rem 0.33rem;
    border-bottom: 1px solid #e8e8e8;
    .guochen {
      padding-right: 0.3rem;
      position: relative;
      .left {
        float: left;
        width: 100%;
        .time {
          display: flex;
          font-size: 3.125vw;
          color: #9a9a9a;
          padding-bottom: 10px;
          //状态标记
          .gzhb-process__point {
            display: inline-block;
            width: 0.16rem;
            height: 0.16rem;
            img {
              height: 0.16rem;
            }
          }
          // 任务名称
          .gzhb-process__title {
            position: relative;
            display: inline-block;
            padding-left: 0.1rem;
            width: 80%;
            font-size: 0.15rem;
            color: #000;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          // 执行的操作
          .gzhb-process__title_icon {
            display: inline-block;
            height: 0.16rem;
          }
        }
        .desc {
          font-size: 0.12rem;
          color: #535353;
          span {
            display: inline-block;
            padding-left: 0.1rem;
            &:nth-child(1) {
              padding-left: 0;
            }
          }
        }
      }
      .ui-icon__more {
        position: absolute;
        right: 2.5vw;
        top: 15px;
        &:after {
          color: #e8e8e8;
        }
      }
      .right {
        float: right;
        width: 20%;
      }
    }
  }
}
</style>